<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      @open="onOpen"
      @close="onClose"
      :title="info.name"
      class="charts-dialog"
    >
      <div v-html="info.title"></div>
      <el-row>
        <el-col :span="24" class="notice-form-title">相关附件</el-col>
      </el-row>
      <el-row
        v-for="(item, index) in informations"
        :key="'informations' + index"
        class="informations-list"
      >
        <el-col :span="18">{{ item.name }}</el-col>
        <el-button
          :span="3"
          link
          type="primary"
          icon="Download"
          @click="download(item)"
          >下载</el-button
        >

        <el-button
          :span="3"
          link
          type="primary"
          icon="Reading"
          @click="preview(item)"
          >在线预览</el-button
        >
      </el-row>
    </el-dialog>
  </div>
  <PreviewDialog
    v-model="fileDialogVisible"
    :infor="currentInfor"
  ></PreviewDialog>
</template>
<script setup>
import { getToken } from "@/utils/auth";
import { getSpectrumInfo } from "@/api/home/home";
import PreviewDialog from "./previewDialog.vue";

const headers = ref({
  Authorization: "Bearer " + getToken(),
});

const { proxy } = getCurrentInstance();
const fileType = ref("");
const info = ref({});
const informations = ref([]);
const fileDialogVisible = ref(false);
const currentInfor = ref({});
const props = defineProps({
  projectId: {
    type: String,
  },
  id: {
    type: Number,
  },
  type: {
    type: String,
  },
});

// 弹窗设置
const dialogVisible = defineModel();
// 弹窗确认回调
const emit = defineEmits(["confirm"]);
/**
 * @name: 弹窗打开后执行
 * @description: 弹窗打开后执行方法
 * @return {*}
 */
function onOpen() {
  let params = {
    id: props.id,
    proId: props.projectId,
    type: props.type,
  };
  getSpectrumInfo(params).then((res) => {
    info.value = res.data.data;
    informations.value = res.data.informations;
  });
}

/**
 * @name: 弹窗关闭时执行
 * @description: 弹窗关闭方法，重置表单
 * @return {*}
 */
function onClose() {}
/**
 * @name: 弹窗取消
 * @description: 弹窗取消方法
 * @return {*}
 */
function close() {
  dialogVisible.value = false;
}
/**
 * @name: 弹窗表单提交
 * @description: 弹窗表单提交方法
 * @return {*}
 */

/** 下载文件 */
function download(item) {
  proxy.download(
    "/common/download",
    {
      fileName: item.url.replace("/profile/upload", ""),
      delete: false,
    },
    item.name
  );
}
//打开在线预览弹窗
function preview(item) {
  currentInfor.value = item;
  fileDialogVisible.value = true;
}
</script>
<style lang="scss">
.charts-dialog {
  height: 90vh;
  width: 60%;
  .el-dialog__body {
    height: calc(100% - 50px);
    text-align: left;
    .notice-form-title {
      margin: 20px 0;
      border-left: 3px solid rgb(64, 158, 255);
      padding: 0 10px;
      font-weight: bold;
    }
  }
}
</style>
